<template>
  <div class="container-top">
    <div class="view_warpper warpper_box">
      <div class="left">
        <div class="logo" @click="$router.push('/')">
          <h1>
            <img src="../static/home/logo.png" />
          </h1>
        </div>
        <div class="nav-list">
          <div class="items" v-for="(item, index) in navlist" :key="index">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 没有登录状态 -->
        <div class="logout" v-if="!$store.state.token">
          <div class="items">
            <nuxt-link to="/login">你好,请登录</nuxt-link>
          </div>
        </div>
        <!-- 有登录状态 -->
        <div class="login" v-else>
          <div class="items">
            <el-avatar :size="40" :src="circleUrl"></el-avatar>
          </div>
          <div class="items">
            {{ $store.state.userinfo.phone | formatPhone }}
          </div>
        </div>
        <div class="myorder">
          <nuxt-link to="/order">我的订单</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      isFixed: false,
      currentIndex: 0,
      navlist: [
        { name: "首页", path: "/" },
        { name: "酒店", path: "/hotel" },
        { name: "推荐攻略", path: "/scenicDiscounts" },
        { name: "周边游", path: "/selfDrive" },
        { name: "旅游快讯", path: "/timeLimit" },
      ],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {},
  mounted() {},
  watch: {},
  computed: {},
  filters: {
    formatPhone(data) {
      return data.substr(0, 3) + "****" + data.substr(7);
    },
  },
};
</script>
<style scoped lang="scss">
.container-top {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  background-color: #37bcfb;
  .view_warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 18px;
    .left {
      display: flex;
      height: 100%;
      align-items: center;
      .logo {
        height: 100%;
        margin-right: 20px;
        h1 {
          margin: 0;
          padding: 10px auto;
          height: 100%;
          font-size: 0;
          img {
            height: 100%;
          }
        }
      }
      .nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        .items {
          height: 60px;
          width: 100px;
          margin: 0 10px;
          a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 16px;
            &.nuxt-link-exact-active {
              background-color: #fff;
              color: #37bcfb;
            }
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .logout {
        display: flex;
        align-items: center;
        .items {
          margin: 0 10px;
          a {
            color: #fff;
            font-size: 16px;
          }
        }
      }
      .login {
        display: flex;
        align-items: center;
        .items {
          margin-left: 10px;
          a {
            color: #fff;
            font-size: 16px;
          }
        }
      }
      .myorder {
        border-left: 1px solid #ccc;
        padding: 0px 20px;
        a {
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
